<template>
    <el-dialog  :modal="modal" :append-to-body="appendToBody" :visible.sync="value" :fullscreen="modalProps.fullscreen"  :close-on-click-modal="closeOnClickModal" 
        :width="modalProps.width ? modalProps.width : '50%'" :before-close="modalProps.onNegativeClick"
       :custom-class="modalProps?.customClass"
        :show-close="modalProps?.showClose" class="cusModal" >
        <div slot="title">
            <cusTitle :title="modalProps.title" v-if="modalProps.title" />
            <slot name="title" v-else></slot>
        </div>

        <div class="cus_modal_body">
            <slot></slot>
        </div>
        <div slot="footer" class="dialog-footer action" v-if="modalProps.isfooter ?? true">
            <el-button type="primary"   @click="positiveClick" :loading="loading" class="edit">
                {{ modalProps.positiveBtnText ? modalProps.positiveBtnText : '保 存' }}
            </el-button>
            <el-button  @click="negativeClick">
                {{ modalProps.negativeBtnText ? modalProps.negativeBtnText : '返 回' }}
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import cusTitle from "@/components/cus-title/index";
export default {
    name: 'cusModal',
    components: { cusTitle },
    props: {
        value: {
            required: true,
            type: Boolean,
        },
        appendToBody: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        closeOnClickModal: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        modal: {
        
            type: Boolean,
            default: () => {
                return false
            }
        },
        modalProps: {
            required: true,
            type: Object,
            default: () => {}
        }

    },
    data() {
        return {
            ruleForm: {},
            loading: false,
        }
    },
    methods: {
        negativeClick() {
            this.modalProps.onNegativeClick(this.setConfirmLoading);
        },
        positiveClick() {
            this.modalProps.onPositiveClick(this.setConfirmLoading);
        },
        setConfirmLoading(bool) {
            this.loading = bool;
        }
    },
}
</script>

<style lang="scss">
.cusModal {
    .cus-title .title .title-name{
        padding-top: 0;
    }

    .dialog-footer {
        text-align: center;

        &.action {
            .el-button {
                min-width: 168px;
            }
        }
    }
}
.edit {
  color: #fff;
  background-color: #327DC9;
  border-color: #327DC9;
}
.edit:hover,
.edit:focus {
//   background: var(--el-button-hover-color);
//   border-color: var(--el-button-hover-color);
//   color: var(--el-button-font-color);
}

</style>